<template>
  <div class="text-container" :ref="`textContainer${text}`" :style="{width: textWidth}">
    <span :ref="`textContainerText${text}`" class="text-container-text">
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  name: 'textOverflowScroll',
  props: {
    delay: {
      type: Number,
      default: 2
    },
    text: {
      type: [String, Number],
      required: true
    },
    textWidth: {
      type: String,
      default: ''
    }
  },
  mounted() {
    const { $refs, delay, text } = this
    const DIV = $refs[`textContainer${text}`]
    const TEXT = $refs[`textContainerText${text}`]
    if (TEXT.offsetWidth > DIV.clientWidth) {
      const scrollWith = DIV.clientWidth - TEXT.offsetWidth
      TweenMax.to(TEXT, Math.abs(scrollWith) / 10, {
        x: scrollWith,
        repeat: -1,
        ease: Power0.easeInOut,
        repeatDelay: 2,
        delay
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.text-container {
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  //text-align: left;
  &-text {
    display: inline-block;
  }
}
</style>
